<template>
  <div class="login">
    <h5>DEMO商城</h5>
<van-cell-group class="input_group">
  <van-field
    v-model="userPhone"
    maxlength="11"
    placeholder="请输入手机号"
  />
   <van-field
    v-model="sms"
    center
    clearable
    label="短信验证码"
    placeholder="请输入短信验证码"
  >
    <van-button slot="button" size="small" type="primary" color="#32e696"
    :disabled="sendCodeDis"
    @touchstart="sendCode"
    >{{sendBtnText}}</van-button>
  </van-field>
  <div class="btn_warp">
    <van-button size="large" round type="primary" color="linear-gradient(to right,rgb(173, 230, 204),#00be6e)"
    @touchstart="login"
    >登录</van-button>
    <h6>忘记密码？</h6>
    <p>还没有账号，立即注册</p>
  </div>
  <van-divider>第三方登录平台</van-divider>
  <div class="icon_wrap">

      <img src="@/assets/images/qqIcon.png">
    <img src="@/assets/images/vxIcon.png">
  
  </div>
</van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      username:'',
      userPhone:'',
      sms:'',
      sendBtnText:"发送验证码",
      sendCodeDis:false
    }
  },
  methods: {
    sendCode() {
      let textPhone= /^1(3|4|5|6|7|8|9)\d{9}$/
      if(!this.userPhone){
        this.$notify({ type: 'warning', message: '请输入手机号码',duration:1500});
      }else if(textPhone.test(this.userPhone)){
         this.$notify({ type: 'success', message: '成功发送',duration:1500});
         let ss = 6
         this.sendBtnText= ss+'s'
         this.sendCodeDis=true
         var timer = setInterval(() => {
<<<<<<< HEAD
           ss -=1;
           this.sendBtnText=ss+'s'
           console.log(this.sendBtnText)
=======
             ss = ss-1;
           this.sendBtnText=ss+'s'
>>>>>>> 468eb3e9d328a4bcfdc396e7918f4d5d31613150
           if(this.sendBtnText==='0s'){
            clearInterval(timer)
            this.sendBtnText="发送验证码"
            this.sendCodeDis=false
           }
         }, 1000);
      }else{
         this.$notify({ type: 'warning', message: '手机号码不正确',duration:1500});
      }
    },
    login(){
      this.$http.userLogin({
      }).then((res)=>{
        this.$router.push('/')
      }).catch((res)=>{
          this.$notify({ type: 'warning', message: '不可预知的错误',duration:1500});
      })
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.login
  position relative
  padding 0.2rem 
  box-sizing border-box
  color #333
  h5
    text-align center
    line-height 0.8rem
    font-size 0.48rem
    margin-top 0.6rem
  .input_group
    margin-top 0.4rem
    text-align left
  .van-hairline--top-bottom::after
    border none 
  .van-field
    margin  0.4rem 0
  .btn_warp
    text-align center
    h6
      margin-top 0.2rem
      color red
      text-align center
      font-size 0.24rem
      line-height 0.6rem
    p
      font-size 0.24rem
      line-height 0.6rem
      color #333333
  .icon_wrap
    display flex
    justify-content space-around
    img 
      width 0.8rem
  
</style>
